<template>
	<div class="Games-date" id="box">
		<ul id='dateUl'>
			<li 
				v-for='(item,index) in dataArr'
				:class='index+1==currentDay?"hover":""'
				@click='changList(item.date)'
			>
				<span class="xingqi">{{ item.xingqi }}</span>
				<span class="date">{{ day==item.date?"今天":item.date }}</span>
			</li>

		</ul>
	</div>
</template>
<script>
export default {
	name: 'GamesDate',
	data: function(){
		return {
			dataArr:[],
			day:'',
			currentDay:0,
		}
	},
	methods:{
		changList(date){
			if (date < 10) {
				date = '0'+date
			}
			this.currentDay = date
			//派发事件changDateList
			this.$emit('changDateList',date)
		},
		getUlWidth(wid,len){
			var ulWidth = wid*len;
			return ulWidth;
		},
		getCurrentMonth(){
			var myDate = new Date();
			var month = myDate.getMonth()+1;//当前月
			var year = myDate.getFullYear();//当前年
			var day = myDate.getDate(); //当天日
			if (day < 10) {
				day = '0'+day
			}
			this.day = day;
			this.currentDay = day;
			var d = new Date(year,month,0);
				d = d.getDate() //当月天数
			var dataArr = []
			for (var i = 0; i < d; i++) {
				//获取某天星期几
				var date = new Date(year+'/'+month+'/'+(i+1)).getDay();
				var xq = this.getDay(date)
				var current = day==(i+1)?true:false;
				dataArr.push({'xingqi':xq,'date':i+1,'current':current})
			}
			return dataArr;
		},
		getDay(m){
			var txt = '';
			switch(m) {
			    case 0:
			        txt = '日'
			        break;
			    case 1:
			       txt = '一'
			        break;
			    case 2:
			        txt = '二'
			        break;
			    case 3:
			       txt = '三'
			        break;
			    case 4:
			        txt = '四'
			        break;
			    case 5:
			       	txt = '五'
			        break;
			    default:
			        txt = '六'
			} 
			return txt;
		}
	},
	mounted(){
		this.dataArr = this.getCurrentMonth();
		var ul = document.getElementById('dateUl'),
			box = document.getElementById('box'),
			ulWidth;
		ul.style.width = this.dataArr.length*1.2+'rem';
		if (this.currentDay-4 > 0) {
			//转化成像素单位
			box.scrollLeft  = (this.currentDay-4)*60;
		}
	},
	activated(){}
};
</script>

<style lang="less" scoped>
	.Games-date{
		position: fixed;
		top: 1rem;
		left: 0;
		width: 100%;
		overflow: scroll;
		background-color: #fff;
	}
	ul{
		overflow: hidden;
		padding:.3rem 0;
		li{
			float: left;
			width: 1.2rem;
			text-align: center;
			span{
				display: block;
				line-height: 2;
				&.xingqi{
					color: #828181;
				}
				&.date{
					width:.89rem;
					margin: auto;
					color: #4E4E4E;
				}
			}
			&.hover{
				.date{
					background: #FA4251;
					color: #fff;
					border-radius: .25rem;
				}
			}
		}
	}
</style>